<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报销查看</title>
    <link rel="stylesheet" type="text/css" href="../css/usermenu.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body style="background-color: #ffaa7f;">
<div id="healing">
    <div class="menu">
        <div>
            <div class="title">
                <button style="width: 200px;font-size: 20px;" onclick="location.replace('userMenu.html');">个人信息</button>
            </div>
        </div>
        <hr style="border: none;">
        <div>
            <div>
                <button style="width: 200px;font-size: 20px;" onclick="location.replace('expenseView.html');">报销查看
                </button>
            </div>
        </div>

    </div>
    <span>
	<table>
		<thead>
			<tr>
				<th>生成日期</th>
				<th>报销单号</th>
				<th>报销状态</th>
				<th>执行操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item,index) in result.list">
				<td>{{item.healing_date}}</td>
				<td>{{item.healing_code}}</td>
				<td>{{item.name}}</td>
				<td>
					<button @click="checkHealing(item.insurance_id,item.healing_id)">进入详情页</button>
				</td>
			</tr>
		</tbody>
	</table>
		<div style="text-align:  center">
			<ul class="pagination" style="margin: auto;">
				<li v-for="n in result.pages">
					<a href="javascript:void(0);" @click="search(n)" :class="{'active' : n==result.pageNum}">{{n}}</a>
				</li>
				<li>
					<select @change="search(1)" v-model="searchParam.onePageCount">
						<option v-for="item in pagecountlist" :value="item">{{item}}</option>
					</select>
				</li>
			</ul>
		</div>

	</span>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/message.js"></script>
<script>
    var vue = new Vue({
        el: "#healing",
        data: {
            "result": {
                "list": {}
            },
            "searchParam": {
                "currentpage": 1,
                "onePageCount": 5
            },
            "pagecountlist": [5, 10, 20, 30, 50],
            showmsg: {
                msginfo: "",
                classobject: {
                    msg: false,
                    success: false
                }
            }
        },
        mounted: function () {
            this.pageLoad();
        },
        methods: {
            search: function (currentpage) {
                this.showmsg.msginfo = "";
                this.searchParam.currentpage = currentpage;

                console.log(sessionStorage.getItem("authtoken"));
                axios.post("http://localhost:8000/bracelet/release/api/healing",
                    {
                        "token": sessionStorage.getItem("authtoken"),
                        "pageNum": this.searchParam.currentpage,
                        "pageSize": this.searchParam.onePageCount
                    })
                    .then(res => {
                        this.result = res.data.result;
                        console.log(this.result.list[0]);

                    })
                    .catch(error => {
                        alert(error.errorMsg);
                    });
            },
            checkHealing: function (insuranceId, healingId) {
                window.open("expenseReport.html?insuranceId=" + insuranceId + "&healingId=" + healingId);
            }

        },
        created: function () {
            // 数据初始化完成
            this.search(1);
        },
        mounted: function () {
            // 数据挂载DOM完成事件
        }
    });
</script>

</html>